﻿@namespace BlazorDemos.Shared

@using Syncfusion.Blazor.Cards;

@inject NavigationManager UriHelper;
@inject SampleService SampleService;

<div class="popular-components">
    <h2>Most Popular UI components</h2>
    @if(!isPrerendering) 
    {
        <div class="sf-popular-components">
            @foreach (var component in this.popularComponents)
            {
                <div class="sf-popular-component @component.ImageName">
                    <SfCard @onclick="@(() => { NavToSample(component.DemoPath); })">
                        <CardImage Image="@(SampleService.ImagePath + component.ImageName + ".svg")"></CardImage>
                        <CardContent>@component.ComponentName</CardContent>
                    </SfCard>
            </div>
            }
        </div>
    }
</div>

@code {
    private bool isPrerendering { get; set; }
    private List<PopularComponents> popularComponents { get; set; }

    // Sample click event handler method.
    private void NavToSample(string path)
    {
        SampleService.Spinner.Show();
        UriHelper.NavigateTo(path + "?theme=bootstrap4");
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        isPrerendering = true;
        this.popularComponents = new PopularComponents().GetComponents();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            isPrerendering = !firstRender;
            StateHasChanged();
        }  
    }
}